<script>
/**
 * @Author: 焦质晔
 * @Date: 2019-06-20 10:00:00
 * @Last Modified by: 焦质晔
 * @Last Modified time: 2019-12-27 17:52:18
 **/
export default {
  name: 'Pagination',
  props: {
    pagination: {
      type: Object,
      required: true
    },
    onPageChange: {
      type: Function,
      default: () => {} 
  },
  pageSizesArray: {
    type: Array,
    default: () => [10, 20, 30, 40, 100]
  }
},
data() {
  return {};
},
methods: {
  handleCurrentChange(val) {
    const { pageSize } = this.pagination;
    this.pagination.current = val;
    this.onPageChange({ pageNum: val, pageSize });
  },
  handleSizeChange(val) {
    const { pageNum } = this.pagination;
    this.pagination.pageSize = val;
    this.onPageChange({ pageNum, pageSize: val });
  }
},
render() {
  const {
    pagination: { current, pageSize, total }, pageSizesArray
  } = this;
  return (
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next, sizes, jumper"
      current-page={current}
      page-size={pageSize}
      page-sizes={pageSizesArray}
      total={total}
      on-size-change={this.handleSizeChange}
      on-current-change={this.handleCurrentChange}
    />
  );
}
};
</script>

<style lang="less" scoped>

